<template>
  <div class="lifecycle-page">
    <h1>onUpdated 生命周期钩子</h1>
    
    <div class="lifecycle-card">
      <h2>什么是 onUpdated?</h2>
      <p>onUpdated 钩子在组件更新后调用，此时DOM已经更新完成，可以安全地访问更新后的DOM元素。</p>
    </div>
    
    <div class="lifecycle-card">
      <h2>实际演示</h2>
      <div class="demo-box">
        <p>当前计数: <span ref="countDisplay">{{ count }}</span></p>
        <p>DOM更新次数: {{ updateCount }}</p>
        <button @click="increment">增加计数</button>
      </div>
    </div>
    
    <div class="lifecycle-card">
      <h2>企业实践</h2>
      <p>在实际开发中，onUpdated的常见用途：</p>
      <ul>
        <li>更新后重新计算布局或位置</li>
        <li>在数据驱动的图表更新后重新调整尺寸</li>
        <li>在列表更新后维持滚动位置</li>
      </ul>
    </div>
    
    <div class="navigation">
      <router-link to="/beforeUpdate" class="nav-button">上一个: onBeforeUpdate</router-link>
      <router-link to="/beforeUnmount" class="nav-button">下一个: onBeforeUnmount</router-link>
    </div>
  </div>
</template>

<script>
import { ref, onUpdated } from 'vue'

export default {
  name: 'OnUpdatedView',
  setup() {
    const count = ref(0)
    const updateCount = ref(0)
    
    onUpdated(() => {
      console.log('onUpdated 被调用')
      updateCount.value++
    })
    
    const increment = () => {
      count.value++
    }
    
    return {
      count,
      updateCount,
      increment
    }
  }
}
</script>

<style scoped>
.lifecycle-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  color: #3498db;
  text-align: center;
  margin-bottom: 30px;
}

.lifecycle-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h2 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.demo-box {
  background-color: #e8f4fc;
  padding: 15px;
  border-radius: 5px;
  margin: 15px 0;
}

button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #2980b9;
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

.navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.nav-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.nav-button:hover {
  background-color: #2980b9;
}
</style>